<template>
  <div class="banner">
    <div
      class="banner-box"
      v-for="(item, index) in slideList"
      v-bind:key="index"
    >
      <a v-bind:href="'/#/product/' + item.id">
        <img v-lazy="item.img" />
      </a>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'top-banner',//加载组件名称
  data() {
    return {
      slideList: [
        {
          id: "42",
          img: "/imgs/slider/banner.png",
        }
      ],
    }
  },
  computed: {
    /*username(){
      return this.$store.state.username;
    },
    cartCount(){
      return this.$store.state.cartCount;
    }*/
    ...mapState(['username', 'cartCount'])
  },
  mounted() {
    this.getProductList();
    let params = this.$route.params;
    if (params && params.from == 'login') {
      this.getCartCount();
    }
  },
  methods: {
    login() {
      this.$router.push('/login');
    },
    getCartCount() {
      this.axios.get('/carts/products/sum').then((res = 0) => {
        this.$store.dispatch('saveCartCount', res);
      })
    },
    logout() {
      this.axios.post('/user/logout').then(() => {
        this.$message.success("退出成功");
        this.$cookie.set('userId', '', { expires: '-1' });
        this.$store.dispatch('saveUserName', '');
        this.$store.dispatch('saveCartCount', '0');
      })
    },
    getProductList() {
      this.axios.get('/products', {
        params: {
          categoryId: '100012',
          pageSize: 6
        }
      }).then((res) => {
        this.phoneList = res.list;
      })
    },
    goToCart() {
      this.$router.push('/cart')
    }
  }
}
</script>

<style lang="scss">
@import "./../assets/scss/base.scss";
@import "./../assets/scss/mixin.scss";
@import "./../assets/scss/config.scss";

.banner {
  .banner-box {
    height: 451px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style> >
